<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书信息管理系统</title>
  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.min.css">
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="favicon.ico" />

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    /* 自己定义的版心 */
    .my-container {
      width: 100%;
      height: 100%;
      padding: 0;
    }

    /* 头部区域 */
    .header {
      width: 100%;
      height: 100px;
      overflow: hidden;
      background: #f7f7f7;
   }

    .header .logo img {
      height: 80px;
      padding-top: 20px;
      padding-left: 20px;
    }

    .user {
      margin-top: 15px;
      padding-top: 20px;
      padding-right: 30px;
      text-align: right;
    }

    .user a {
      padding-right: 10px;
    }

    .user img {
      margin: 0 5px;
      width: 40px;
    }

    /* 内容区域 */
    .body {
      width: 100%;
      height: calc(100% - 106px);
    }

    .body .menu {
      width: 180px;
      height: 100%;
      float: left;
    }

    .body .card {
      width: calc(100% - 180px);
      height: 100%;
      float: left;
    }

    .body iframe {
      border: none;
      width: 100%;
      height: 100%;
    }
    svg {
      position: relative;
      top: 5px;
    }
  </style>
  <!-- 引入jquery.js-->
  <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
  <!-- 引入bootstrap.js-->
  <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
  <script>
    $(function (){
      $("#admin").text(sessionStorage.getItem("nickname"));
    })

    function logout(){
      // 清理掉缓存
      sessionStorage.clear();
      // 跳转大登录页面
      window.location.href = "login.html";
    }
  </script>
</head>

<body>
  <div class="container my-container">
    <!-- 头部 -->
    <div class="header">
      <div class="row">
        <!-- logo -->
        <div class="col-md-4 logo">
          <img src="static/img/3.png" alt="">
        </div>
        <!-- 管理员 -->
        <div class="col-md-offset-3 col-md-5 user">
          <svg t="1652600301622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2807" width="20" height="20"><path d="M774.095238 652.190476m-201.142857 0a201.142857 201.142857 0 1 0 402.285714 0 201.142857 201.142857 0 1 0-402.285714 0Z" fill="#4C91FF" p-id="2808"></path><path d="M512 1024C228.571429 1024 0 795.428571 0 512S228.571429 0 512 0s512 228.571429 512 512-228.571429 512-512 512z m0-963.047619C262.095238 60.952381 60.952381 262.095238 60.952381 512s201.142857 451.047619 451.047619 451.047619S963.047619 761.904762 963.047619 512 761.904762 60.952381 512 60.952381z" fill="#231815" p-id="2809"></path><path d="M496.761905 231.619048h-18.285715c-18.285714 0-30.47619-12.190476-30.47619-30.476191V182.857143c0-18.285714 12.190476-30.47619 30.47619-30.476191h18.285715c18.285714 0 30.47619 12.190476 30.47619 30.476191v18.285714c0 18.285714-12.190476 30.47619-30.47619 30.476191z" fill="#4C91FF" p-id="2810"></path><path d="M783.238095 545.52381h-292.571428c-18.285714 0-30.47619-12.190476-30.476191-30.476191V292.571429c0-18.285714 12.190476-30.47619 30.476191-30.476191s30.47619 12.190476 30.47619 30.476191v161.523809c0 18.285714 12.190476 30.47619 30.476191 30.476191h231.619047c18.285714 0 30.47619 12.190476 30.476191 30.47619 0 15.238095-15.238095 30.47619-30.476191 30.476191z" fill="#231815" p-id="2811"></path></svg>
          <span id="time" style="font-weight: 600"></span>
<!--          <a href="#">消息 <span class="badge"> 42 </span></a>-->
          <span id="admin" style="font-size: 16px">管理员</span>
          <img src="static/img/admin.png" alt="" class="img-circle">
          <button type="button" class="btn btn-danger" onclick="logout()">退出登录</button>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="body">
      <div class="menu">
<!--        引用Menu菜单组件-->
        <iframe src="static/menu/Menu.html" frameborder="0"></iframe>
      </div>
<!--      card ：使用iframe，实现网页的嵌套，这个地方一定有：id="card"-->
      <div class="card">
        <iframe src="wellcome.html" frameborder="0" name="card" id="card"></iframe>
      </div>
    </div>
  </div>
</body>
<script>
  function getTime(){
    var myDate = new Date();
    var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
    var myToday = myDate.getDate(); //获取当前日(1-31)
    var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    var myHour = myDate.getHours(); //获取当前小时数(0-23)
    var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
    var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
    var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var nowTime;

    nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    //console.log(nowTime);
    $('#time').html(nowTime);
  };
  function fillZero(str){
    var realNum;
    if(str<10){
      realNum	= '0'+str;
    }else{
      realNum	= str;
    }
    return realNum;
  }
  setInterval(getTime,0);
</script>
</html>